<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getExpressTake, apply, showTakeInfo, confirmSend } from '@/api/express'
import type { ExpressTake } from '@/api/express/type'
import { getDeliveryTime, getSexLimit, reqExpressType, getApplyStatus } from './common'
import { toast } from '@/utils/common'
import { baseUrl } from '@/config'

const expressTake = ref<ExpressTake>()
const expressType = ref({})
const id = ref<number>()
const textColor = ref<string>('#ff7744')
const visableDetail = ref<any>({})
const takeInfoList = ref<any>({})

const loadExpressTake = async () => {
  const res = await getExpressTake(id.value)
  expressTake.value = res.data
  if (expressTake.value?.applyStatus === 1) {
    textColor.value = '#ff7744'
  }
  if (expressTake.value?.applyStatus === 2) {
    textColor.value = '#33be59'
  }
  if (expressTake.value?.applyStatus === 3) {
    textColor.value = '#eb3030'
  }
  expressTake.value?.expressTakeDetails.forEach(item => {
    visableDetail.value[item.id] = false
  })
}
const loadExpressType = async () => {
  const res = await reqExpressType()
  res.forEach(item => {
    expressType.value[item.type] = item.name
  })
}

onLoad(async (option: any) => {
  id.value = option.id
  await loadExpressTake()
  loadExpressType()
})


const applyExpress = async () => {
  try {
    const res = await apply(id.value)
    toast(res.data)
    loadExpressTake()
  } catch (error) {
    toast(error.tips)
  }
}

const lookTakeInfo = async (index: number) => {
  if (visableDetail.value[index] && takeInfoList.value[index]) {
    visableDetail.value[index] = !visableDetail.value[index]
    return
  }
  visableDetail.value[index] = !visableDetail.value[index]
  if (!takeInfoList.value[index]) {
    try {
      const res = await showTakeInfo(id.value)
      res.data.forEach(item => {
        item.pictureArr = []
        if (!item.picture) { return }
        item.picture.split(',').forEach(pic => {
          item.pictureArr.push({
            status: 'success',
            message: '',
            url: baseUrl + pic
          })
        })
        takeInfoList.value[item.id] = item
      })
    } catch (error) {
      toast(error.tips)
    }
  }
}
const optConfirmSend = async () => {
  try {
    const res = await confirmSend(id.value)
    toast(res.data)
    loadExpressTake()
  } catch (error) {
    toast(error.tips)
  }
}

</script>

<template>
  <view class="express-detail">
    <user-info class="express-detail-userinfo" :data="expressTake">
      <uv-tags type="success" text="待接单" v-if="expressTake?.status === 0"></uv-tags>
      <uv-tags type="success" text="已接单" v-if="expressTake?.status === 1"></uv-tags>
      <uv-tags type="success" text="已送达" v-if="expressTake?.status === 2"></uv-tags>
      <uv-tags type="error" text="已取消" v-if="expressTake?.status === 3"></uv-tags>
      <uv-tags type="success" text="已结束" v-if="expressTake?.status === 4"></uv-tags>
    </user-info>
    <view class="express-detail-desc">
      <uv-list class="express-detail-desc-item">
        <uv-list-item title="收件地址" :border="true"
          :right-text="expressTake?.address.building + expressTake?.address.address + ''"></uv-list-item>
        <uv-list-item title="期望送达时间" :border="true"
          :right-text="getDeliveryTime()[expressTake?.deliveryTime]"></uv-list-item>
        <uv-list-item title="性别限制" :border="true" :right-text="getSexLimit()[expressTake?.sexLimit]"></uv-list-item>
        <uv-list-item title="快递数量" :border="true" :right-text="expressTake?.amount + '件'"></uv-list-item>
        <uv-list-item title="佣金" :border="true"
          :right-text="expressTake?.bounty ? '￥' + expressTake?.bounty : '0'"></uv-list-item>
        <uv-list-item v-if="expressTake?.remark" title="备注" :border="true"
          :right-text="expressTake?.remark"></uv-list-item>
        <uv-list-item title="申请状态" :border="true">
          <template #footer>
            <uv-text style="justify-content: flex-end;" :color="textColor"
              :text="getApplyStatus()[expressTake?.applyStatus]"></uv-text>
          </template>
        </uv-list-item>
      </uv-list>
      <view class="express-detail-desc-list">
        <uv-list class="express-detail-desc-list-item" v-for="(detail, index) in expressTake?.expressTakeDetails">
          <uv-list-item title="取件地址" :right-text="detail?.expressStation"></uv-list-item>
          <uv-list-item title="快递大小" :border="true" :right-text="expressType[detail?.type]"></uv-list-item>
          <uv-list-item title="金额" :border="true" :right-text="'￥' + detail?.price"></uv-list-item>
          <uv-list-item title="取件信息" :border="true" v-if="expressTake?.applyStatus === 2">
            <template #footer>
              <uv-icon name="eye-off-outline" v-if="visableDetail[detail.id] === false" size="16px" color="#999"
                @click="lookTakeInfo(detail.id)" />
              <uv-icon name="eye" v-else size="16px" color="#999" @click="lookTakeInfo(detail.id)" />
            </template>
          </uv-list-item>
          <uv-list-item title="取件码" :right-text="takeInfoList[detail.id]?.takeCode"
            v-show="visableDetail[detail.id]"></uv-list-item>
          <uv-list-item title="快递图片/短信截图" v-show="visableDetail[detail.id]">
            <template #footer>
              <uv-upload :fileList="takeInfoList[detail.id]?.pictureArr" name="picture" multiple
                :maxCount="takeInfoList[detail.id]?.pictureArr.length" :previewFullImage="true" :disabled="true"
                :deletable="false"></uv-upload>
            </template>
          </uv-list-item>
        </uv-list>
      </view>
    </view>
    <view class="express-detail-btn">
      <view class="express-total">
        合计：
        <view>
          ￥{{ expressTake?.price }}
        </view>
        <view v-if="expressTake?.bounty">
          +￥{{ expressTake?.bounty }}
        </view>
      </view>
      <uv-button v-if="expressTake?.applyStatus === 0" color="#ff7744" @click="applyExpress">申请接单</uv-button>
      <uv-button v-if="expressTake?.applyStatus === 2 && expressTake?.status === 1" color="#ff7744"
        @click="optConfirmSend">确认送达</uv-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.express-detail {
  padding-bottom: 200rpx; // 添加底部内边距防止内容被遮挡
}

.express-detail-userinfo {
  background-color: #fff;
}

.express-detail-desc {
  background-color: #fff;

  .express-detail-desc-item {
    ::v-deep .uv-text {
      justify-content: flex-end !important;
    }
  }

  .express-detail-desc-list {
    padding: 20rpx;

    .express-detail-desc-list-item {
      padding: 20rpx;
      border: 1px solid #eee;
      border-radius: 50rpx;
      margin-bottom: 10rpx;
    }
  }
}

.express-detail-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  background-color: #fff;

  padding: 20rpx;
  display: flex;
  justify-content: space-between;

  .express-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ff7744;
    font-weight: bold;
  }
}
</style>
